<template>
	<view class="">
		<!--  -->
		<ben></ben>
		<!--  -->
		<view class="row min30">
			<u-avatar :src="userinfo.avatar" size="50"></u-avatar>
			<view class="column font600 size30 col3 minleft30">
				{{ userinfo.nickname ? userinfo.nickname : '姓名' }}
				<view class="font500 size24 col3 mintop10">
					{{ userinfo.phone ? userinfo.phone : '手机号码' }}
				</view>
			</view>
			<view class="minauto minright0 minbottom0 box rad1 colf font500 size28 align_item_c disflex"
				v-if="type == 3" @click="getQrcode">
				推广码
				<image src="@/static/image/35.png" style="width: 36rpx;height: 36rpx;"></image>
			</view>
		</view>
		<view class="posrel row" style="height: 160rpx;width: 100%;">
			<view class="column" style="margin-left: 60rpx;">
				<view class="row colf mintop20 font600 size30 align_item_c"
					@click="$jump.nav('/mypackage/user/detail_intergral')">
					{{ userinfo.integral }}
					<view class="minleft10 size22 font500">
						明细
					</view>
					<u-icon name="arrow-right" color="#FFFFFF" size="10"></u-icon>
				</view>
				<view class="row colf mintop20 font600 size30 align_item_c">
					<image src="@/static/image/55.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
					<view class="minleft10 size22 font500">
						我的积分
					</view>
				</view>
			</view>
			<view class="minau minright40 mintop20 row" @click="$jump.nav('/mypackage/user/recharge_integral')">
				<view class="font600 size30 column colf minright10">
					积分充值
					<view class="mintop20 size22 font500">
						消费返积分
					</view>
				</view>
				<image src="@/static/image/1706251575807 1.png" mode=""
					style="width: 80rpx;height: 80rpx;margin-top: 10rpx;"></image>
			</view>
			<image src="@/static/image/8.png" mode="" class="posabs zin-1" style="width: 100%;height: 160rpx;"></image>

		</view>
		<view class="row" style="margin: 30rpx 20rpx;height: 160rpx;" v-if="type == 1">
			<view class="posrel disflex minright10" style="width: 50%;" @click="onShop">
				<view class="minleft30 mintop20 font600 size30" style="color: #2146A1;">
					我的门店
					<view class="size24 font500 mintop10" style="color: #4E6EBE;">
						申请加入门店
					</view>
				</view>
				<image src="@/static/image/q.png" mode="" class="posabs zin-1" style="width: 100%;height: 160rpx;">
				</image>
			</view>
			<view class="posrel disflex" style="width: 50%;" @click="onSalesman">
				<view class="minleft30 mintop20 font600 size30" style="color: #80521F;">
					业务员
					<view class="size24 font500 mintop10" style="color: #A1794B;">
						申请成为业务员
					</view>
				</view>
				<image src="@/static/image/q q.png" mode="" class="posabs zin-1" style="width: 100%;height: 160rpx;">
				</image>
			</view>
		</view>
		<view class="rad2 pad20"
			style="margin: 30rpx 20rpx;background: linear-gradient( 135deg, #FFFCF0 0%, #FFFDD7 100%);" v-if="type == 3"
			@click="$jump.nav('/mypackage/user/distribution')">
			<view class="row size30 font600 align_item_c minbottom30" style="color: #482805;">
				分销中心
				<view class="minau minright0">
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>
			<view class="row">
				<view class="column flex1 text_center size32 distribution font600">
					{{ team.total_subordinates }}
					<view class="size26 font500 mintop10">
						累计邀请用户
					</view>
				</view>
				<view class="column flex1 text_center size32 distribution font600">
					{{ team.total_direct_subordinates }}
					<view class="size26 font500 mintop10">
						直推用户
					</view>
				</view>
				<!-- <view class="column flex1 text_center size32 distribution font600">
					{{ team.total_indirect_subordinates }}
					<view class="size26 font500 mintop10">
						间推用户
					</view>
				</view> -->
			</view>
			<view class="row mintop20">
				<view class="column flex1 text_center">
					{{ team.total_orders }}
					<view class="size22 font500 mintop10">
						总订单数
					</view>
				</view>
				<!-- <view class="column flex1 text_center">
					{{ team.total_orders }}
					<view class="size22 font500 mintop10">
						总积分
					</view>
				</view> -->
				<view class="column flex1 text_center">
					{{ userinfo.salesman_money }}
					<view class="size22 font500 mintop10">
						可提现积分
					</view>
				</view>
			</view>
			<view class="mintop20 distribution size22 font500 row align_item_c" style="justify-content: center;">
				自主累计消费：
				<view class="size30 font600">
					￥{{ total_price }}
				</view>
			</view>
		</view>
		<view class="min30 background_f rad2 pad20 size30 font600 col0" v-if="type == 3">
			我的银行卡
			<view class="row min30_rl just_cont_spacebet font500 col3 padbottom20 mintop40 align_item_c"
				style="border-bottom: 2rpx solid #e7e7e7;" v-for="(bank_item,bank_index) in bank_list">
				<view class="column">
					{{ bank_item.bank }}
					<view class="mintop20">
						{{ bank_item.bank_number }}
					</view>
				</view>

				<view class="col6 size26" @click="getDelBank(bank_item.id)">
					删除
				</view>
			</view>
			<view class="font500" style="margin: auto;margin-top: 60rpx;width: 300rpx;">
				<u-button text="添加银行卡" shape="circle" color="#3C70F5" hairline="false" size="normal"
					@click="$jump.nav('/mypackage/store/add_bankcard')"></u-button>
			</view>
		</view>
		<view class="min20_rl background_f rad2 pad20">
			<view class="row col3 size30 font600 align_item_c">
				我的订单
				<view class="minau minright0 size24 col6 font500 row align_item_c"
					@click="$jump.nav('/mypackage/user/order?type=' + 0)">
					全部订单
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>
			<view class="row mintop30">
				<view class="column minauto text_center" @click="$jump.nav('/mypackage/user/order?type=' + 1)">
					<image src="@/static/image/付款.png" mode="" class="minauto" style="width: 52rpx;height: 46rpx;">
					</image>
					<view class="col6 size22 font500 mintop10">
						待付款
					</view>
				</view>
				<view class="column minauto text_center" @click="$jump.nav('/mypackage/user/order?type=' + 2)">
					<image src="@/static/image/4444.png" mode="" class="minauto" style="width: 52rpx;height: 46rpx;">
					</image>
					<view class="col6 size22 font500 mintop10">
						待核销
					</view>
				</view>
				<view class="column minauto text_center" @click="$jump.nav('/mypackage/user/order?type=' + 3)">
					<image src="@/static/image/Group 147.png" mode="" class="minauto"
						style="width: 52rpx;height: 46rpx;"></image>
					<view class="col6 size22 font500 mintop10">
						已完成
					</view>
				</view>
				<view class="column minauto text_center" @click="$jump.nav('/mypackage/user/order?type=' + 4)">
					<image src="@/static/image/退款售后2.png" mode="" class="minauto" style="width: 52rpx;height: 46rpx;">
					</image>
					<view class="col6 size22 font500 mintop10">
						已取消
					</view>
				</view>
			</view>
		</view>
		<view class="min20 background_f rad2 pad20">
			<view class="row col3 size30 font600 align_item_c">
				常用功能
			</view>
			<view class="row mintop30">
				<view class="column flex1 align_item_c" @click="$jump.nav('/mypackage/user/address_list')">
					<image src="@/static/image/222222.png" mode="" style="width: 52rpx;height: 46rpx;">
					</image>
					<view class="col6 size22 font500 mintop10">
						取货人
					</view>
				</view>
				<button class="weixin-btn column flex1 align_item_c" open-type="contact">
					<image src="@/static/image/客服.png" mode="" style="width: 52rpx;height: 46rpx;">
					</image>
					<view class="col6 size22 font500">
						客服反馈
					</view>
				</button>
				<view class="column flex1 align_item_c" @click="$jump.nav('/mypackage/user/set')">
					<image src="@/static/image/Group 427319465.png" mode="" style="width: 52rpx;height: 46rpx;"></image>
					<view class="col6 size22 font500 mintop10">
						设置
					</view>
				</view>
				<view class="column flex1 align_item_c"
					@click="$jump.nav('/indexpackage/web/protocol?type=' + 'about_us')">
					<image src="@/static/image/Group 427319466.png" mode="" style="width: 52rpx;height: 46rpx;"></image>
					<view class="col6 size22 font500 mintop10">
						关于我们
					</view>
				</view>
			</view>

		</view>
		<u-popup mode="center" :show="show" :safeAreaInsetBottom="false" @close="show = false">
			<view class="background_f rad2">
				<image style="width: 180px;height: 200px;" :src="url" mode=""></image>
			</view>
		</u-popup>
		<!-- 底部tab -->
		<block>
			<userTab :item="3"></userTab>
		</block>
		<!-- 底部tab -->
	</view>
</template>

<script>
	import userTab from "@/components/tabBar/userTab.vue"
	export default {
		components: {
			userTab
		},
		data() {
			return {
				type: 0,
				show: false,
				user_id: '',
				team: '',
				total_price: '',
				url: '',
				page: 0,
				userinfo: {},
				bank_list: [],
				bankList: ['中国建设银行', '中国工商银行']
			}
		},
		onShow() {
			//当前页面展示的时候他就执行该生命周期
			const token = uni.getStorageSync('token');
			this.type = uni.getStorageSync('user_type');
			this.user_id = uni.getStorageSync('user_id');
			if (token && this.user_id) {
				//如果存在token
				this.getUserinfo()
				if (this.type == 3) {
					this.getBankList()
					this.getTeamNumber()
					this.getOrderTotal()
				}

				//按正常逻辑来讲 登录成功 我们是不是需要向服务器获取用户的信息？
				//那么我们一起来获取用户信息
			} else {

				uni.showToast({
					title: '您还未登录，正在前往登录',
					icon: 'none'
				})
				setTimeout(function() {
					uni.navigateTo({
						url: "/mypackage/user/login"
					})
				}, 1000)
			}
		},
		methods: {
			onSalesman() {
				if (this.userinfo.salesman_type == 1) {
					this.$jump.nav('/mypackage/user/apply_salesperson')
				} else if (this.userinfo.salesman_type == 2) {
					this.$com.toast('审核中')
				} else if (this.userinfo.salesman_type == 3) {
					this.$com.toast('您已经成为业务员')
				} else {
					this.$com.toast('您申请已被驳回，请重新申请！')
					setTimeout(() => {
						this.$jump.nav('/mypackage/user/apply_salesperson')
					}, 1000)
				}
			},
			onShop() {
				if (this.userinfo.shop_type == 1) {
					this.$jump.nav('/mypackage/user/apply_store')
				} else if (this.userinfo.shop_type == 2) {
					this.$com.toast('审核中')
				} else if (this.userinfo.shop_type == 3) {
					this.$com.toast('您已经加入门店')
				} else {
					this.$com.toast('您申请已被驳回，请重新申请！')
					setTimeout(() => {
						this.$jump.nav('/mypackage/user/apply_store')
					}, 1000)
				}
			},
			async getTeamNumber() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("member/team_number/" + this.user_id)
				if (code == 200) {
					this.team = data
				} else {
					console.log(message);
				}
			},
			async getOrderTotal() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("member/order_total_price/" + this.user_id)
				if (code == 200) {
					this.total_price = data
				} else if (code == 201) {
					this.total_price = data
				} else {
					console.log(message);
				}
			},
			async getBankList() {
				this.page++
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("member/bank_cards_list/" + this.user_id, {
					page: this.page,
				})
				if (code == 200) {
					this.bank_list.push(...data.items)
					if (data.items.length == 0) {
						return
					} else {
						this.getBankList()
					}
				} else {
					console.log(message);
				}
			},
			async getDelBank(id) {
				let {
					code,
					message,
					data
				} = await this.$com.fetchDel("member/bank_del/" + id)
				if (code == 200) {
					this.$com.toast(message)
					this.page = 0
					this.bank_list = []
					this.getBankList()
				} else {
					console.log(message);
				}
			},
			async getUserinfo() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("member/user_info/" + this.user_id)
				if (code == 200) {
					this.userinfo = data

				} else {
					console.log(message);
				}
			},
			async getQrcode() {
				if (this.userinfo.code) {
					this.url = this.userinfo.code
					this.show = true
					return
				}
				let {
					code,
					message,
					data
				} = await this.$com.fetch("member/code/" + this.user_id)
				if (code == 200) {
					this.url = data
					this.show = true
				} else {
					console.log(message);
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.weixin-btn {
		background: none;
		margin: 0;
		padding: 0;
		height: unset;

		&:before,
		&:after {
			border: none;
		}
	}

	.distribution {
		color: #6F4723;
	}

	.box {
		background: #FE9416;
		padding: 4rpx 16rpx;
	}
</style>